<template>
  <div>
    <div class="left_foot" ref="wrap"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { getchangdi } from '../../request'
const wrap = ref([])

let option = ref({
  legend: {
    icon: 'circle',
    textStyle: {
      color: '#fff'
    },
    itemStyle: {
      color: 'rgb(255, 0, 135)'
    },
    show: false
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: '8px'
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    data: ['图书馆', '体育馆', '实验楼', '超市', '会议楼']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      inside: false,
      show: true
    }
  },
  grid: {
    height: '70',
    top: '30'
  },
  series: [
    {
      data: [10, 46, 64, 10, 10],
      type: 'bar',
      stack: 'a',
      name: '人数',
      itemStyle: {
        borderRadius: [50, 50, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#9f0bff' },
          { offset: 0.5, color: '#701dff' },
          { offset: 1, color: '#3b30ff' }
        ])
      },
      showBackground: true,
      backgroundStyle: {
        borderRadius: [50, 50, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#371787bc' },
          { offset: 0.5, color: '#37178795' },
          { offset: 1, color: '#37178720' }
        ])
      },
      barWidth: '30%', // 控制柱状图的宽度
      barGap: '10%' // 设置柱状图之间的间隔为0%
    }
  ]
})

onMounted(() => {
  getchangdi().then((res) => {
    console.log(res)
  const  myChart = echarts.init(wrap.value)
    myChart.setOption(option.value)
      window.addEventListener('resize',function(){
    myChart.resize()
  })
  })
})
</script>

<style>
.left_foot {
  color: #fff;
  height: 220px;
  margin-top: 15px;
  background-color: #0c1d5f;
  display: flex;
}
</style>